<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/w3css/4/w3.css">
    <link rel="stylesheet" href="popup.css">
</head>

<body style="width: 380px;">
    <div class="w3-bar" style="width: 280px;" data-popupPanelSection="0">
        <button class="w3-bar-item w3-button w3-ripple w3-hover-light-blue w3-buttonSelected"
            style="border-radius: 5px 0px 0px 0px; position: relative;" title="Show original"
            data-i18n-title="btnRestore" value="original"><span data-i18n="btnMobileOriginal">Original</span><span
                style="font-size: 9px; position: absolute; bottom: 0; left: 5px;"
                class="w3-text-pale-blue">Unknown</span></button>
        <button class="w3-bar-item w3-button w3-ripple w3-hover-light-blue" style="border-radius: 0px 5px 0px 0px;"
            title="Translate" data-i18n-title="btnTranslate" value="en">English</button>
    </div>
    <div class="w3-bar" style="width: 280px;" data-popupPanelSection="2">
        <button class="w3-bar-item w3-button w3-ripple w3-hover-light-blue" style="border-radius: 0px 0px 0px 5px;"
            title="Translate" data-i18n-title="btnTranslate" value="es">Spanish</button>
        <button class="w3-bar-item w3-button w3-ripple w3-hover-light-blue" style="border-radius: 0px 0px 5px 0px;"
            title="Translate" data-i18n-title="btnTranslate" value="de">German</button>
    </div>

    <div class="w3-container w3-margin-top" style="font-weight: 500">
        <div data-popupPanelSection="0">
            <div style="margin-right: 60px; margin-bottom: 5px;">
                <button data-i18n="msgImproveTranslation" id="btnImproveTranslation">Improve translation</button>
            </div>
            <div id="divAlwaysTranslateThisLang">
                <input type="checkbox" class="w3-check" id="cbAlwaysTranslateThisLang" disabled>
                <label id="lblAlwaysTranslateThisLang" for="cbAlwaysTranslateThisLang" data-i18n="lblAlwaysTranslate"
                    data-i18n-ph-value="">Always translate from</label>
            </div>
        </div>
        <div data-popupPanelSection="1">
            <input type="checkbox" class="w3-check" id="cbAlwaysTranslateThisSite">
            <label for="cbAlwaysTranslateThisSite" data-i18n="btnAlwaysTranslate">Always translate this site</label>
        </div>
        <div data-popupPanelSection="3">
            <hr>
        </div>
        <div data-popupPanelSection="3">
            <input type="checkbox" class="w3-check" id="cbShowTranslateSelectedButton">
            <label for="cbShowTranslateSelectedButton" data-i18n="lblShowTranslateSelectedButton">Show the button to
                translate the selected text</label>
        </div>
        <div data-popupPanelSection="4">
            <input type="checkbox" class="w3-check" id="cbShowOriginalWhenHovering">
            <label for="cbShowOriginalWhenHovering" data-i18n="lblShowOriginalTextWhenHovering">Show original text when
                hovering</label>
        </div>
        <div data-popupPanelSection="5">
            <hr>
        </div>
        <div data-popupPanelSection="5">
            <input type="checkbox" class="w3-check" id="cbShowTranslatedWhenHoveringThisSite">
            <label for="cbShowTranslatedWhenHoveringThisSite" data-i18n="lblShowTranslatedWhenHoveringThisSite">Show
                translation when hovering over this site</label>
        </div>
        <div data-popupPanelSection="6">
            <div id="divShowTranslatedWhenHoveringThisLang">
                <input type="checkbox" class="w3-check" id="cbShowTranslatedWhenHoveringThisLang" disabled>
                <label id="lblShowTranslatedWhenHoveringThisLang" for="cbShowTranslatedWhenHoveringThisLang"
                    data-i18n="lblShowTranslatedWhenHoveringThisLang" data-i18n-ph-value="">Show translation when
                    hovering over websites
                    in</label>
            </div>
        </div>
    </div>
    </div>

    <div id="moreOrLess" style="height: 32px;">
        <div id="more" class="w3-display-bottomleft w3-hover-light-grey"
            style="padding: 8px 60px 8px 20px; font-weight: 500;">
            <span data-i18n="more">More</span>&nbsp;&nbsp;&nbsp;<i class="arrow down"></i>
        </div>
        <div id="less" class="w3-display-bottomright w3-hover-light-grey"
            style="padding: 8px 20px 8px 60px; font-weight: 500;">
            <i class="arrow up"></i>&nbsp;&nbsp;&nbsp;<span data-i18n="less">Less</span>
        </div>
    </div>

    <div class="w3-display-topright margin10">
        <div class="w3-hover-light-grey" id="btnSwitchInterfaces" title="Switch between simple and complex interface"
            data-i18n-title="swapPopup">
            <i class="gg-swap"></i>
        </div>
        <!-- <a href="https://www.patreon.com/filipeps" target="blank"><img src="/icons/patreon_icon.png" style="top: 75px; right: 5px; width: 32px; position: absolute;"></a> -->
    </div>

    <div class="w3-display-topright" style="margin-right: 35px; margin-top: 10px; position: absolute;">
        <div class="w3-hover-light-gray" style="position: relative;" id="divMenu" title="Options"
            data-i18n-title="btnOptions">
            <div class="w3-hover-light-grey" style="border-radius: 50%; padding: 5px;" id="btnMenu"
                style="position: relative;">
                <div class="menuDot"></div>
            </div>
            <select id="btnOptions" style="font-weight: 500; font-size: small;">
                <option value="options" selected disabled hidden>Options</option>
                <option data-i18n="msgChooseAnotherLanguage" value="changeLanguage">Choose another language</option>
                <option data-i18n="btnNeverTranslateThisLanguage" value="neverTranslateThisLanguage"
                    style="display: none;">Never translate this language</option>
                <option data-i18n="btnNeverTranslate" value="neverTranslateThisSite">Never translate this site</option>
                <option data-i18n="btnAlwaysTranslate" value="alwaysTranslateThisSite" data-popupPanelSection2="1">
                    Always translate this site</option>
                <optgroup label="" data-popupPanelSection2="6"></optgroup>
                <option data-i18n="lblShowTranslateSelectedButton" value="showTranslateSelectedButton"
                    data-popupPanelSection2="3">Show the button to translate the selected text</option>
                <option data-i18n="lblShowOriginalTextWhenHovering" value="showOriginalTextWhenHovering"
                    data-popupPanelSection2="4">Show original text when hovering</option>
                <option data-i18n="lblShowTranslatedWhenHoveringThisSite" value="showTranslatedWhenHoveringThisSite"
                    data-popupPanelSection2="5">Show translation when hovering over this site</option>
                <option data-i18n="lblShowTranslatedWhenHoveringThisLang" data-i18n-ph-value=""
                    value="showTranslatedWhenHoveringThisLang" data-popupPanelSection2="6" hidden>Show translation when
                    hovering over websites in</option>
                <optgroup label="" data-popupPanelSection2="6"></optgroup>
                <option data-i18n="btnOpenOnGoogleTranslate" value="translateInExternalSite">Open in Google Translate
                </option>
                <option data-i18n="btnMoreOptions" value="moreOptions">More options</option>
                <option data-i18n="msgTranslatePDF" value="translatePDF">Translate PDF</option>
                <option data-i18n="btnDonate" value="donate">Donate</option>
            </select>
        </div>
    </div>

    <div class="w3-display-topright w3-hover-light-grey" id="btnPatreon" title="patreon"
        style="margin-top: 8px; margin-right: 55px;" data-i18n-title="lblMakeDonation">
        <i class="gg-heart" style="scale: 0.85"></i>
    </div>

    <div class="w3-display-topright" style="margin-right: 15px; margin-top: 45px; position: absolute; cursor: pointer;">
        <div id="divIconTranslate" style="position: relative;" title="Switch between translation services"
            data-i18n-title="swapTranslationService">
            <img id='iconTranslate' src="/icons/google-translate-32.png" style="position: relative;">
            <img id='iconSwap' src="/icons/swap-32.png" style="position: absolute; top: 0; left: 0;">
        </div>
    </div>

    <script src="/lib/polyfill.js"></script>
    <script src="/lib/checkedLastError.js"></script>
    <script src="/lib/stuff.js"></script>
    <script src="detect-pdf.js"></script>
    <script src="/lib/languages.js"></script>
    <script src="/lib/config.js"></script>
    <script src="/lib/i18n.js"></script>
    <script src="popup.js"></script>
</body>

</html>